/*
 * ToolBarMenuWidget.fx
 *
 * Created on 10-Feb-2009, 14:09:25
 */

package widgets;

import javafx.scene.CustomNode;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.input.MouseEvent;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.animation.Interpolator;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;


/**
 * @author beol
 */

public class ToolBarMenuWidget extends CustomNode {

    var node: Group = Group {
    }

    public var x:Number = 0;
    public var y:Number = 0;

    public var isImport: Boolean = false on replace do {
        if (isImport == true) {
            ghostImportAnimation.playFromStart();
            importOpacity = 1.0
        } else {
            importAnimation.rate = -1;
            importAnimation.play();
        }
    }
    public var isEdit: Boolean = false on replace do {
        if (isEdit == true) {
            ghostEditAnimation.playFromStart();
            editOpacity = 1.0
        } else {
            editAnimation.rate = -1;
            editAnimation.play();
        }
    }
    public var isExport: Boolean = false on replace do {
        if (isExport == true) {
            ghostExportAnimation.playFromStart();
            exportOpacity = 1.0
        } else {
            exportAnimation.rate = -1;
            exportAnimation.play();
        }
    }

    var importOpacity:Number = 0.4;

    var importAnimation:Timeline = Timeline {
        repeatCount: 1
        keyFrames : [
            KeyFrame {
                time : 0s
                values: importOpacity => 0.4
            },
            KeyFrame {
                time: 0.2s
                values: importOpacity => 1.0 tween Interpolator.LINEAR;
            }

        ]
    }

    var importScale: Number;
    var ghostImportOpacity: Number = 0.0;

    var ghostImportImage: ImageView = ImageView {
        image: Image {
            url: "{__DIR__}import.png";
        }

        translateX: x;
        translateY: y;

        opacity: bind ghostImportOpacity;
        scaleX: bind importScale;
        scaleY: bind importScale;
    }

    var ghostImportAnimation: Timeline = Timeline {
        keyFrames: [
            KeyFrame {
                time: 0s
                values: [ghostImportOpacity => 0.0, importScale => 1.0]
                action: function() {
                    insert ghostImportImage into node.content;
                }
            },
            KeyFrame {
                time: 0.3s
                values: [ghostImportOpacity => 1.0 tween Interpolator.LINEAR, importScale => 1.5 tween Interpolator.LINEAR]
            }
            KeyFrame {
                time: 0.6s
                values: [ghostImportOpacity => 0.0 tween Interpolator.LINEAR, importScale => 2.0 tween Interpolator.LINEAR]
                action: function() {
                    delete ghostImportImage from node.content;
                }
            }
        ]

    }

    var importImage: ImageView = ImageView {

        translateX: x
        translateY: y
        image: Image {
            url: "{__DIR__}import.png";
        }
        
        opacity: bind importOpacity

        onMouseClicked: function( e: MouseEvent ):Void {
            if (isImport == false) {
                isExport = false;
                isEdit = false;
                isImport = true;
            }
        }
        onMouseEntered: function( e: MouseEvent ):Void {
            if (isImport == false) {
                importAnimation.rate = 1;
                importAnimation.play();
            }
        }
        onMouseExited: function( e: MouseEvent ):Void {
            if (isImport == false) {
                importAnimation.rate = -1;
                importAnimation.play();
            }
        }

    }


    var editScale: Number = 1.0;
    var ghostEditOpacity: Number = 0.0;

    var ghostEditImage: ImageView = ImageView {
        image: Image {
            url: "{__DIR__}edit.png";
        }

        translateX: x + 78;
        translateY: y;

        opacity: bind ghostEditOpacity;
        scaleX: bind editScale;
        scaleY: bind editScale;
    }

    var ghostEditAnimation: Timeline = Timeline {
        keyFrames: [
            KeyFrame {
                time: 0s
                values: [ghostEditOpacity => 0.0, editScale => 1.0]
                action: function() {
                    insert ghostEditImage into node.content;
                }
            },
            KeyFrame {
                time: 0.3s
                values: [ghostEditOpacity => 1.0 tween Interpolator.LINEAR, editScale => 1.5 tween Interpolator.LINEAR]
            }
            KeyFrame {
                time: 0.6s
                values: [ghostEditOpacity => 0.0 tween Interpolator.LINEAR, editScale => 2.0 tween Interpolator.LINEAR]
                action: function() {
                    delete ghostEditImage from node.content;
                }
            }
        ]

    }

    var editOpacity:Number = 0.4;

    var editAnimation:Timeline = Timeline {
        repeatCount: 1
        keyFrames : [
            KeyFrame {
                time : 0s
                values: editOpacity => 0.4
            },
            KeyFrame {
                time: 0.2s
                values: editOpacity => 1.0 tween Interpolator.LINEAR;
            }

        ]
    }

    var editImage: ImageView = ImageView {

        translateX: x + 78
        translateY: y 
        image: Image {
            url: "{__DIR__}edit.png";

        }

        opacity: bind editOpacity
        onMouseClicked: function( e: MouseEvent ):Void {
            if (isEdit == false) {
                isExport = false;
                isEdit = true;
                isImport = false;
            }
        }
        onMouseEntered: function( e: MouseEvent ):Void {
            if (isEdit == false) {
                editAnimation.rate = 1;
                editAnimation.play();
            }
        }
        onMouseExited: function( e: MouseEvent ):Void {
            if (isEdit == false) {
                editAnimation.rate = -1;
                editAnimation.play();
            }
        }
    }

    var exportScale: Number = 1.0;
    var ghostExportOpacity: Number = 0.0;

    var ghostExportImage: ImageView = ImageView {
        image: Image {
            url: "{__DIR__}export.png";
        }

        translateX: x + 78 + 84;
        translateY: y;

        opacity: bind ghostExportOpacity;
        scaleX: bind exportScale;
        scaleY: bind exportScale;
    }

    var ghostExportAnimation: Timeline = Timeline {
        keyFrames: [
            KeyFrame {
                time: 0s
                values: [ghostExportOpacity => 0.0, exportScale => 1.0]
                action: function() {
                    insert ghostExportImage into node.content;
                }
            },
            KeyFrame {
                time: 0.3s
                values: [ghostExportOpacity => 1.0 tween Interpolator.LINEAR, exportScale => 1.5 tween Interpolator.LINEAR]
            }
            KeyFrame {
                time: 0.6s
                values: [ghostExportOpacity => 0.0 tween Interpolator.LINEAR, exportScale => 2.0 tween Interpolator.LINEAR]
                action: function() {
                    delete ghostExportImage from node.content;
                }
            }
        ]

    }

    var exportOpacity:Number = 0.4;

    var exportAnimation:Timeline = Timeline {
        repeatCount: 1
        keyFrames : [
            KeyFrame {
                time : 0s
                values: exportOpacity => 0.4
            },
            KeyFrame {
                time: 0.2s
                values: exportOpacity => 1.0 tween Interpolator.LINEAR;
            }

        ]
    }

    var exportImage: ImageView = ImageView {

        translateX: x + 78 + 84
        translateY: y 
        image: Image {
            url: "{__DIR__}export.png";
        }
        opacity: bind exportOpacity
        onMouseClicked: function( e: MouseEvent ):Void {
            if (isExport == false) {
                isExport = true;
                isEdit = false;
                isImport = false;
            }
        }
        onMouseEntered: function( e: MouseEvent ):Void {
            if(isExport == false) {
                exportAnimation.rate = 1;
                exportAnimation.play();
            }
        }
        onMouseExited: function( e: MouseEvent ):Void {
            if(isExport == false) {
                exportAnimation.rate = -1;
                exportAnimation.play();
            }
        }
        
    }

    var background: Rectangle = Rectangle {
        translateX: x - 8;
        translateY: y - 4;
        width: 220
        height: 54
        arcWidth: 30
        arcHeight: 30
        stroke: Color.BLACK
        fill: Color.LIGHTGREY
    }

    protected override function create(): Node {
        node.translateX = x;
        node.translateY = y;
        node.content = [background, importImage, editImage, exportImage];
        return node;
    }
}
